 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 2.准备一个容器 -->
     <div id="app">
     <h1> Vue的模板</h1>
   <!-- v-for="(item,index) in 数组" 
       item     循环项
       index    索引值 
       -->
       <ul>
        <!-- v-bind:key="" ->可以简写成 :key=""
         作用：给元素添加唯一标识，便于列表项的正确排序复用，避免组件混乱状态-->
        <li v-for="item in booksList " :key="item.id">{{item.name}} {{item.author}}
          <button @click="deleteBook(item.id)">删除</button>
        </li>
        
      </ul>
     </div>
    <!-- 1.导入 vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
         // 3.创建一个Vue实例
     const app=new Vue({
        // 容器
        el:'#app',
        data:{
          booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]

         
        },
        // 事件处理函数需要写到methods 对象结构中
        methods:{
           deleteBook(id){
            // filter 过滤掉id相等的项（删除）

            // 注意：filter 不修改原来的数据，需要重新赋值
            this.booksList=this.booksList.filter((v)=>v.id!==id)

           }
        }
     
     })
     </script>
</body>
</html>